<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3D旋转立方体</title>
    <style>
        #view{
            margin: 200px auto;
            height: 200px;
            width: 200px;
            perspective: 500px;
            perspective-origin: 250px -50px;
        }
        @keyframes scroll {
            100% {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }
        #cube{
            height: 200px;
            width: 200px;
            position: relative;
            transform-style: preserve-3d;
            animation: scroll 2s linear 7s infinite;
            border-radius: 50%

        }
        #cube:hover{
            animation-play-state: paused;
        }
        .item{
            height: 200px;
            width: 200px;
            position: absolute;
            border: 1px solid black;
            background-color: pink;
            opacity: 1;

        }
        img{
            height: 200px;
            width: 200px;
            -webkit-filter: grayscale(1);
            transition: all 0.5s ease;
            cursor: pointer;
            border-radius: 50%;
        }
        img:hover{
            -webkit-filter: grayscale(0);
            transform: scale(1.2,1.2)
        }
        @keyframes item1{
            100%{transform: rotateY(-90deg);}
        }
        #item1{
            z-index:6;
            transform-origin: left;
            animation: item1 1s linear 1s both;
        }
        @keyframes item2{
            100%{transform: rotateY(90deg);}
        }
        #item2{
            z-index: 5;
            transform-origin: right;
            animation: item2 1s linear 2s both;
        }
        @keyframes item3{
            100%{transform: rotateX(90deg);}
        }
        #item3{
            z-index: 4;
            transform-origin: top;
            animation: item3 1s linear 3s both;
        }
        @keyframes item4{
            100%{transform: rotateX(-90deg);}
        }
        #item4{
            z-index: 3;
            transform-origin:bottom;
            animation: item4 1s linear 4s both;
        }
        @keyframes item5{
            100%{transform: translateZ(200px);}
        }
        #item5{
            z-index: 2;
            animation: item5 1s linear 5s both;
        }
        @keyframes item6{
            100%{transform: rotateY(180deg);}
        }
        #item6{
            z-index: 1;
            animation: item6 1s linear 6s both
        }
    </style>
</head>
<body>
<div id="view">
    <div id="cube">
        <div class="item" id="item1"><img src="img1/1.jpg"></div>
        <div class="item" id="item2"><img src="img1/2.jpg"></div>
        <div class="item" id="item3"><img src="img1/3.jpg"></div>
        <div class="item" id="item4"><img src="img1/4.jpg"></div>
        <div class="item" id="item5"><img src="img1/5.jpg"></div>
        <div class="item" id="item6"><img src="img1/6.jpg"></div>

    </div>
</div>
</body>
